<template>
  <div>
    <van-count-down :time="time" @finish="finish"/>

  <van-form >
    <div v-if="list.length >0" v-for="(item, index) in list" v-show="index==now_index">
      <h3>{{item.name}}({{item.type}})</h3>
      <van-radio-group v-if="item.type == 1 || item.type == 3" v-model="radio_value">
        <van-radio :name="val.id" v-for="(val, i) in item.answer">{{val.title}}</van-radio>
      </van-radio-group>
      <van-checkbox-group v-else-if="item.type == 2" v-model="checkbox_value">
        <van-checkbox :name="val.id" v-for="(val, i) in item.answer">{{val.title}}</van-checkbox>
      </van-checkbox-group>

    </div>
    <div style="margin: 16px;">
      <van-button v-if="now_index == list.length -1 " round block type="info" @click="changeQ">
        提交
      </van-button>
      <van-button type="primary" @click="changeQ" round block v-else>下一题</van-button>

    </div>
  </van-form>
  <van-dialog v-model="show" title="" :before-close="buttonCallBack">
    <div class="">
      <div class="answer-content" v-if="user_true" >
        <van-icon name="checked" color="#07c160" /> 恭喜您答对了
      </div>
      <div class="answer-content" v-else >
        <van-icon name="clear" color="#ee0a24"  /> 对不起，您答错了 <br />
        <p v-html="true_answer"></p>
      </div>

    </div>
  </van-dialog>
</div>
</template>

<script>
import { getDatiQuestionInfo, datiStore } from '@/api/user.js'
import { getResultUrl } from '@/utils/app.js'
//is_show_true_answer
export default {
  name: 'DatiView',
  components: {},
  data () {
    return {
      show: false,
      info: this.$store.state.acc,
      user: this.$store.state.user,
      list: [],
      now_index: 0,//当前题目的索引
      radio_value: 0,
      checkbox_value: [],
      submit_title: '下一题',
      user_answer: [],//用户的所选项
      user_true: true,//用户每题答对答错情况
      true_answer: '',//当前用户正确答案，用于展示
      time: this.$store.state.acc.user_time * 1000,
    }
  },
  created() {
    this.init()

  },
  methods: {
    init() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: false,
        duration: 10000
      })
      getDatiQuestionInfo().then(res=>{
        this.$toast.clear()
        console.log(res)
        this.list = res
      })
      
    },
    changeQ() {
      if(this.list[this.now_index]['type'] == 2 || this.list[this.now_index]['type'] == 1) {
        this.user_answer.push(this.radio_value)
      }else{
        this.user_answer.push(this.checkbox_value)
      }
      //如果显示正确答案
      if(this.info.is_show_true_answer == 1) {
        this.getTrueAnswer()
      }else{
        if(this.now_index == this.info.total_number - 1) {//最后一题直接提交
          this.onSubmit()
        }else{
          this.now_index ++
        }
      }
    },
    onSubmit(){
      this.$toast.loading({
        message: '加载中...',
        forbidClick: false,
        duration: 10000
      })
      let _this = this
      datiStore({user_answer: this.user_answer}).then(res=>{
        this.$toast.clear()
        this.$toast.success({
          message: '提交成功'
        })
        this.$store.commit('SET_ANSWER_RESULT', res)
        setTimeout(function(){
          _this.$router.push({name: 'DatiResult', params: {id: res.id}})
        }, 2000);

      })
      // return false
      
    },
    //获取当前题目的正确答案，用于展示
    getTrueAnswer() {
      if(this.info.is_show_true_answer == 0) return ''
      let true_answer = []
      let true_answer_string = '正确答案为：<br />'
      let q = this.list[this.now_index]
      let i = 0
      for (let ii in q['answer']) {
        if(q['answer'][ii]['is_true'] == 1) {
          true_answer[i] = q['answer'][ii]['id']
          true_answer_string += '<li>'+ q['answer'][ii]['title']+'</li>'
          i ++
        }
      }
      this.true_answer = true_answer_string
      console.log(true_answer)
      console.log(this.checkbox_value.length)
      console.log(this.checkbox_value)
      //判断用户答对答错
      if(q.type == 1 || q.type == 3) {
        if(true_answer.length == 1 && this.radio_value == true_answer[0]) {
          this.user_true = true
        }else{
          this.user_true = false
        }
      }else if(q.type == 2) {//多选
        if(true_answer.length == this.checkbox_value.length) {
          let a = 0
          for (var aa in this.checkbox_value) {
            if(true_answer.indexOf(this.checkbox_value[aa]) > 0) {
              a ++
            }
          }
          if(a == true_answer.length) {
            this.user_true = true
          }
        }else{
          this.user_true = false
        }
      }  
      this.show = true
      
    },
    buttonCallBack(action, done) {
      console.log(this.now_index)
      if(this.now_index == this.info.total_number - 1) {//最后一题直接提交
        this.onSubmit()
      }else{
        this.now_index ++
      }
      this.radio_value = 0
      this.checkbox_value = []
      done()
    },
    finish() {//倒计时结束，直接提交
      this.onSubmit()
    }
  }
}
</script>
<style>
.answer-content {text-align:center; line-height:30px; margin: 30px auto;}
.answer-content p { margin: 10px;text-align:left;}
</style>
